<template>
    <div class="sync-detail">

        <SynchronizeMockups />

        <div class="sync-content">
            <h1>Product description</h1>

            <div class="content-item">
                <h2>Product title</h2>
                <el-input v-model="setting.title" :maxlength="70" style="max-width: 360px"></el-input>
            </div>

            <div class="content-item">
                <h2>Description</h2>
                <!-- edsy 只能纯文本，不能插入图片，不能粘贴图片 -->
                <CommonQuillEditor v-model="setting.description" />
            </div>

            <!-- shopify -->
            <template v-if="shop.shop_type == 1">
                <!-- 分类 -->
                <SynchronizeCollection v-model="setting.product_collection_id" />

                <!-- tags -->
                <SynchronizeTags v-model="setting.tags" />
            </template>

            <!-- Etsy -->
            <template v-if="shop.shop_type == 2">
                <!-- tags -->
                <SynchronizeTags v-model="setting.tags" />

                <!-- etsy 性别类型 -->
                <SynchronizeEtsyStyle v-model="setting.taxonomy_id" />

                <!-- etsy 第一次添加时，物流模板 -->
                <SynchronizeEtsyProfile v-model="setting.shipping_profile_id" :isnew.sync="setting.is_new_shipping" v-if="status.action == 'create'" />
            </template>

            <!-- Wix  -->
            <template v-if="shop.shop_type == 3">
                <!-- 分类 -->
                <SynchronizeCollection v-model="setting.product_collection" />
            </template>

            <!-- Woo  -->
            <template v-if="shop.shop_type == 4">
                <!-- 分类 -->
                <SynchronizeCollection v-model="setting.product_collection_id" />

                <!-- tags -->
                <SynchronizeTags v-model="setting.tags" />
            </template>

            <!-- SquareSpace  -->
            <template v-if="shop.shop_type == 5">
                <!-- store page -->
                <SynchronizeSquarespaceStore v-model="setting.product_collection" />

                <!-- tags -->
                <SynchronizeTags v-model="setting.tags" />
            </template>

        </div>

    </div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
export default {
    name: "SynchronizeDetail",
    data () {
        return {
            etsyProfile: { loading: false, list: [], dialog: false },
            etsyTaxonomy: { list: [], loading: false },
            collections: [],
            collections_loading: false,
            checkable: false, // 是否开启检查
            error: [],
        };
    },
    computed: {
        ...mapState("synchronize", {
            clothes: "clothes",
            mockups: "mockups",
            setting: "setting",
            status: "status",
            shop: "shop",
        }),


        /*
                action () {
                    return (this.$route.query || {}).action;
                },
                selectColorList () {
                    // 按颜色顺序
                    return this.colorList.filter((color) => this.selectColor.indexOf(color.color_id) >= 0)
                },

                // 标题
                title: {
                    get () {
                        return this.info.title;
                    },
                    set (value) {
                        this.info.title != value &&
                            this.$store.dispatch("synchronize/setInfo", { title: value });
                    },
                },

                // 描述
                description: {
                    get () {
                        return this.info.description;
                    },
                    set (value) {
                        if (this.info.description != value) {
                            this.info.description = value;
                            this.$store.dispatch("synchronize/setInfo", {
                                description: value,
                            });
                        }
                    },
                },

                // 分类
                collection: {
                    get () {
                        if (this.info.shop_type == 1) {
                            // shopify
                            return this.info.product_collection_id;
                        } else if (this.info.shop_type == 2) {
                            // etsy
                        } else if (this.info.shop_type == 3 || this.info.shop_type == 5) {
                            // wix || squarespace
                            return this.info.product_collection;
                        } else if (this.info.shop_type == 4) {
                            // woo
                            return this.info.product_collection_id;
                        }
                    },
                    set (value) {

                        if (this.info.shop_type == 1 && this.info.product_collection_id != value) {
                            // shopify
                            this.$store.dispatch("synchronize/setInfo", { product_collection_id: value });
                        } else if (this.info.shop_type == 2 && this.info.product_collection_id != value) {
                            // etsy
                        } else if (this.info.shop_type == 3 || this.info.shop_type == 5 && this.info.product_collection != value) {
                            // wix || squarespace
                            this.$store.dispatch("synchronize/setInfo", { product_collection: value });
                        } else if (this.info.shop_type == 4 && this.info.product_collection_id != value) {
                            // woo
                            this.$store.dispatch("synchronize/setInfo", { product_collection_id: value });
                        }

                    },
                },

                // 标签
                dynamicTags: {
                    get () {
                        if (this.info.tags) {
                            return this.info.tags.split("|");
                        } else {
                            return [];
                        }
                    },
                    set (value) {
                        let tags = value.join ? value.join("|") : "";
                        if (this.info.tags != tags) {
                            this.$store.dispatch("synchronize/setInfo", { tags: tags });
                        }
                    },
                },

                // 尺码表显示位置
                sizeGuide: {
                    get () {
                        return this.info.size_guide;
                    },
                    set (val) {
                        if (this.info.size_guide != val) {
                            this.info.size_guide = val;
                        }
                    },
                },

                etsyTaxonomyId: {
                    get () {
                        return this.info.taxonomy_id;
                    },
                    set (val) {
                        if (this.info.taxonomy_id != val) {
                            this.info.taxonomy_id = val;
                            this.checkError()
                        }
                    },
                },

                etsyProfileType: {
                    get () {
                        return this.info.is_new_shipping;
                    },
                    set (val) {
                        if (this.info.is_new_shipping != val) {
                            this.info.is_new_shipping = val;
                            this.checkError()
                        }
                    },
                },

                etsyProfileId: {
                    get () {
                        return this.info.shipping_profile_id;
                    },
                    set (val) {
                        if (this.info.shipping_profile_id != val) {
                            this.info.shipping_profile_id = val;
                            this.checkError()
                        }
                    },
                },

                // 背景色
                backgroundColor () {
                    return this.baseColorObject ? this.baseColorObject.color_num : "";
                },

                */
    },


    methods: {

        /*
        // shopify 初始化获取数据
        async getShopifyData () {
            // 获取店铺分类列表
            await this.getgetCollection();
        },

        // Etsy 初始化获取数据
        async getEtsyData (type) {

            const loader = {
                taxonomy: true,
                profile: true,
            }

            // 二次编辑不加载物流模板
            if (this.action) {
                loader.profile = false;
            }

            // 单独加载
            if (type) {
                Object.keys(loader).map(key => {
                    if (key == type) {
                        loader[key] = true;
                    } else {
                        loader[key] = false;
                    }
                })
            }

            // 获取风格分类
            if (loader.taxonomy) {
                this.etsyTaxonomy.loading = true;
                this.$http("UserStore.getEtsyTaxonomy/" + this.ids.product_id).then(
                    (response) => {
                        if (response.code === 0) {
                            this.etsyTaxonomy.list = response.data || [];
                            this.etsyTaxonomy.loading = false;
                        } else {
                            this.etsyTaxonomy.loading = false;
                        }
                    }
                );
            }

            // 获取物流模板
            if (loader.profile) {
                this.etsyProfile.loading = true;
                this.$http(
                    "UserStore.getEtsyShippingProfile/" + this.ids.shop_id
                ).then((response) => {
                    if (response.code === 0) {
                        this.etsyProfile.list = response.data || [];
                        this.etsyProfile.loading = false
                    } else {
                        this.etsyProfile.loading = false
                    }
                });
            }

        },
        // wix 初始化获取数据
        async getWixData () {
            // 获取店铺分类列表
            await this.getgetCollection();
        },

        // woo 初始化获取数据
        async getWooData () {
            // 获取店铺分类列表
            await this.getgetCollection();
        },

        // Ss 初始化获取数据
        async getSquarespaceData () {
            this.collections_loading = true;
            let res = await this.$http(
                "AppStore.getSquareSpaceStorePage",
                this.ids.shop_id
            );
            if (res.code === 0) {
                this.collections_loading = false;
                this.collections = res.data;
            } else {
                this.collections_loading = false;
                this.$uxMessage.error(res.msg || "error");
            }
        },


        async getgetCollection () {
            //店铺名称
            this.collections_loading = true;
            let res = await this.$http("UserStore.getCollection", {
                shop_id: this.ids.shop_id,
            });
            if (res.code == 0) {
                //成功获得类型
                this.collections_loading = false;
                this.collections = res.data;
                // 跳转
            } else {
                this.collections_loading = false;
                this.$uxMessage.error(res.msg || "error");
                // 提示
            }

        },

        //勾选显示图片
        setSelectModel (item) {
            let img = item.model_url;
            let select = this.selectModel.slice(0);
            let index = select.indexOf(img);

            if (img == this.baseModel) {
                // 头图处理
                // 如果头图不在选中的，则添加进稳定中的
                index < 0 &&
                    this.$store.commit(
                        "store/SET_SELECT_MODEL",
                        select.concat(img)
                    );
            } else {
                // 其他图片处理
                if (index < 0) {
                    this.$store.commit(
                        "store/SET_SELECT_MODEL",
                        select.concat(img)
                    );
                } else {
                    select.splice(index, 1);
                    this.$store.commit("synchronize/SET_SELECT_MODEL", select);
                }
            }
        },

        setSizeGuide () {
            this.sizeGuide = this.sizeGuide ? 0 : 1
        },

        setBaseModel (item) {
            this.$store.commit("synchronize/SET_BASE_MODEL", item.model_url);
            this.setSelectModel(item);
        },
        setBaseColor (item) {
            this.$store.commit("synchronize/SET_BASE_COLOR", item.color_id);
        },
        insertTags (event) {
            let value = event.target.value;
            if (value) {
                this.dynamicTags = [value].concat(this.dynamicTags);
                event.target.value = "";
                document.activeElement.blur();
            }
        },

        // 检查状态
        checkError () {
            let error = [];
            let shop_type = this.info.shop_type;

            if (!this.checkable) {
                // 不开检查不管
            } else if (shop_type == 2) {
                // etsy 同步必须选择style和Shipping profile
                if (!this.info.taxonomy_id) {
                    error.push("taxonomy_id");
                }
                if (!this.action && !(this.info.is_new_shipping || this.info.shipping_profile_id)) {
                    error.push("shipping_profile_id");
                }
            }

            this.error = error;
        },

        */
    },
    created () {
        // if (this.info.shop_type == 1) {
        //     this.getShopifyData();
        // } else if (this.info.shop_type == 2) {
        //     this.getEtsyData();
        // } else if (this.info.shop_type == 3) {
        //     this.getWixData();
        // } else if (this.info.shop_type == 4) {
        //     this.getWooData();
        // } else if (this.info.shop_type == 5) {
        //     this.getSquarespaceData();
        // }

        // this.$on('global:SYNCHRONIZE_FORBIDEN', e => {
        //     this.checkable = true;
        //     this.checkError()
        // })
    },
};
</script>
<style lang="scss" scoped>
.sync-content {
    border-top: 1px solid #ebebeb;
    margin-top: 80px;
    padding-top: 80px;
    padding-bottom: 36px;

    & > h1 {
        display: flex;
        font-size: 18px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 20px;

        &::before {
            content: '';
            width: 20px;
            height: 20px;
            background-image: url(@/assets/images/synchronize/synchronize-description.png);
            background-size: 100% 100%;
            margin-right: 4px;
        }
    }

    .content-item {
        position: relative;
        & > h2,
        &::v-deep > h2 {
            font-size: 16px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #000000;
            line-height: 18px;
            padding-top: 40px;
            padding-bottom: 16px;
            em {
                margin-left: 8px;
                font-size: 12px;
                color: #f00;
                font-weight: normal;
                vertical-align: top;
            }
        }
        & > p {
            i {
                font-size: 14px;
            }
            font-size: 14px;
        }
    }

    .quill-editor::v-deep {
        position: relative;
        .ql-toolbar {
            position: absolute;
            left: 1px;
            top: 1px;
            right: 1px;
            border: none;
            z-index: 1;
            background: #f6f6f6;
            border-radius: 6px 6px 0 0;
            padding: 0 20px;
            line-height: 58px;
            border-bottom: 1px solid #c6c6c6;
        }
        .ql-container {
            border: none;
        }
        .ql-editor {
            box-sizing: border-box;
            padding: 88px 28px 28px;
            border: 1px solid #c6c6c6;
            border-radius: 6px;
            height: 430px;
            font-size: 14px;
            color: #000000;
            line-height: 28px;

            &::before {
                content: '';
                position: absolute;
                left: 0;
                right: 0;
                top: 42px;
                height: 1px;
                background: #c6c6c6;
            }
        }
        .ql-editor:hover {
            border-color: #f6b2cd;
            box-shadow: 0 0 0 1px #f6b2cd;
            &::before {
                background: #f6b2cd;
            }
        }

        .ql-editor:focus {
            border-color: #f6b2cd;
            box-shadow: 0 0 0 1px #f6b2cd;
            &::before {
                background: #f6b2cd;
            }
        }
    }
}
</style>
